<template>
	<view class="my-content">
		<u-tabs-swiper ref="uTabs" :list="list" active-color="#ff4a17" :current="current" @change="tabsChange"
			:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		<swiper class="swiper height" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y :scroll-top="scrollTop" class="height" @scrolltolower="onreachBottom"
					@scroll="scroll">
					<TaskList :listData="listData"></TaskList>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import TaskList from '../components/TaskList.vue'
	export default {
		onLoad(option) {
			this.status = option.status;
		},
		components: {
			TaskList
		},
		data() {
			return {
				scrollTop: 0,

				status: null, // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
				list: [{
					name: this.$t('全部'),
					id: 'all'
				}, {
					name: this.$t('待报价'),
					id: '0'
				}, {
					name: this.$t('待付款'),
					id: '1'
				}, {
					name: this.$t('进行中'),
					id: '2'
				}, {
					name: this.$t('已完成'),
					id: '3'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				pageSize: 10,
				pageNum: 1,
				listData: [{
					id: 'asdfasdfasdfasdfasdf',
					status: '0', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
					type: '1', // 1 拜访 2 商务洽谈
					money: '200',
					relMoney: '',
					createTime: '2024/8/20 11:30'
				}, {
					id: '344444444444444',
					status: '1', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
					type: '2', // 1 拜访 2 商务洽谈
					money: '500',
					relMoney: '309',
					createTime: '2024/8/20 11:30'
				}, {
					id: '3444444443344444444',
					status: '2', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
					type: '2', // 1 拜访 2 商务洽谈
					money: '500',
					relMoney: '309',
					createTime: '2024/8/20 11:30',
					payTime: '2024/8/20 11:30',
				}, {
					id: '344444444477744444',
					status: '3', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
					type: '2', // 1 拜访 2 商务洽谈
					money: '500',
					relMoney: '309',
					createTime: '2024/8/20 11:30',
					payTime: '2024/8/20 11:30',
				}, {
					id: '34444488444477744444',
					status: '1', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
					type: '2', // 1 拜访 2 商务洽谈
					money: '500',
					relMoney: '309',
					createTime: '2024/8/20 11:30'
				}, {
					id: '34444455444477744444',
					status: '1', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
					type: '2', // 1 拜访 2 商务洽谈
					money: '500',
					relMoney: '309',
					createTime: '2024/8/20 11:30'
				}],
				old: {
					scrollTop: 0
				}
			};
		},
		watch: {
			//切换tab 列表置顶 top 0
			swiperCurrent(val) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			}
		},
		methods: {

			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('onreachBottom');
				this.pageNum++;
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;

		.swiper {
			padding: 0 20rpx;
			padding-bottom: 20rpx;

			
		}

		.height {
			height: calc(100vh - 184rpx);
		}
	}
</style>